<template>
	<view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		mounted() {
			/**
			 * async 
			 * 		只能使用function定义函数 es6方式定义报错 
			 *
			 */

			/*
				async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。
				
				await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ，你只会得到一个语法错误。
			
				await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。	
			*/
			// await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。/
			//防止出错的方法，也是将其放在try...catch代码块之中。
			async function test() {
				try {
					await new Promise(function(resolve, reject) {
						throw new Error('错误了'); //返回错误
						resolve('aaa')
					});
				} catch (e) {
					console.log('err', e)
				}
				return await ('成功了');
			}
			//async函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。
			test().then((res) => {
				console.log('res', res);
			})
			// 假设表单提交前要通过俩个校验接口
			//------------------------
			async function check(ms) {
				return new Promise((resolve) => { //只有promise异步操作才会使用await延迟执行
					setTimeout(() => { // 模仿异步 
						resolve(`check ${ms}`);
					}, ms);
				})
			}

			function check1() {
				console.log('check1');
				return check(1000);
			}

			function check2() {
				console.log('check2');
				return check(2000);
			}

			// Promise写法
			function submit() {
				console.log('submit');
				// 经过俩个校验 多级关联 promise传值嵌套较深
				check1().then(res1 => {
					check2(res1).then(res2 => {
						/*
						 * 提交请求
						 */
					})
				})
			}
			submit();

			//async/await写法
			async function asyncAwaitSubmit() {
				/*  
						await 操作符只能在异步函数 async function 内部使用。如果一个 Promise 被传递给一个 await 操作符
					  await 将等待 Promise 正常处理完成并返回其处理结果，也就是说它会阻塞后面的代码，等待 Promise 对象结果。
						如果等待的不是 Promise 对象，则返回该值本身。
				*/
				console.log('async/await');
				let res1 = await check1(),
					res2 = await check2(res1);
				console.log(res1, res2);
				/*
				 * 提交请求
				 */
			}

			function getFoo() {

			}

			function getBar() {

			}
			async function BarFoo() {
				//多个await命令后面的异步操作，如果不存在继发关系（即互不依赖），最好让它们同时触发。
				let foo1 = await getFoo();
				let bar1 = await getBar();
				// 上面这样写法 getFoo完成以后，才会执行getBar

				// 同时触发写法 ↓

				// 写法一
				let [foo2, bar2] = await Promise.all([getFoo(), getBar()]);

				// 写法二
				let fooPromise = getFoo();
				let barPromise = getBar();
				let foo3 = await fooPromise;
				let bar3 = await barPromise;
			}

			BarFoo()



		},
		methods: {

		}

	}
</script>

<style lang="scss">

</style>
